﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 80%;
            margin:10%  auto;
            margin-left: 16%;
        }
        input[type=text]{
            width: 80%;
            outline: none;
            border: none;
            border-bottom: black 1px solid;
            padding-left: 10px;
            height:30px
        }
        input[type=password]{
            width: 80%;
            outline: none;
            border: none;
            border-bottom: black 1px solid;
            padding-left: 10px;
            height:30px
        }
        input[type=button]{
            width: 41%;
        }
        .reg{
            background:deepskyblue;
            color: white;
            height: 40px;
            border: none;
            border-radius: 12px;
            font-size:18px;
        }
        .regbtn{
            background:beige;
            color: black;

            height: 40px;
            border: none;
            border-radius: 12px;
            font-size:18px;
        }
        .phoneError{
            height: 30px;
        }
        .phoneError,.pwdError{
            display:block;
            height:30px;
            font-size:12px;
            color:red;
            margin-top:6px;
        }
        #fales{
            color:red;
            margin-left:20px;
        }

    </style>
</head>
<body>
<div>
    <div class="img"><img id="p" src="1.jpg" width="100%"></div>
    <form action="">
        <div>
            <input type="text" id="phone" placeholder="请输入手机号" />
            <span id="phoneError" class="phoneError"></span>
        </div>
        <div>
            <input type="password" id="pwd" placeholder="请输入密码" />
            <span id="pwdError" class="pwdError"></span>
        </div>
        <a href="log in.html"><input type="button" id="reg" class="reg" value="登录"></a>
        <input type="button" id="regbtn" class="regbtn" value="注册">
    </form>
    <div id="fales"></div>
</div>
</body>
<script>
    pwd.onclick=function(){
        if (phone.value.length==0){
            phoneError.innerHTML="*手机号还没填呢~"
        }
    };
    phone.onclick=function(){
        phoneError.innerHTML="";
    };
    phone.onkeyup=function(){
        if(phone.value.length>0){
            phoneError.innerHTML="";
        }else{
            phoneError.innerHTML="*手机号还没填呢~"
        }
    };
    function check(){
        var reg =/^1[345789]\d{9}]$/;
        if(!reg.test(phone.value)){
            phoneError.innerHTML="*手机号填写错了哟~"
        }
        if (phone.value.length==0){
            phoneError.innerHTML="*手机号还没填呢~";
            return false;
        }
        if (pwd.value.length==0){
            pwdError.innerHTML="*密码还没填QAQ";
            return false;
        }
        return true
    }
    regbtn.onclick=function () {
        if (!check()){
            return;
        }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("post","http://47.104.241.232/add.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("phone="+phone.value+"&pwd="+pwd.value);
        xmlhttp.onreadystatechange=function () {
            if (xmlhttp.readyState==4&&xmlhttp.status==200){
                if(xmlhttp.responseText=="ok"){
                    location ="reg.html"
                }else {
                    fales.innerHTML="*登录失败,看看是不是哪里填错了"
                }
            }
        }
    }

</script>
</html>